<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">等级说明</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 当前等级卡片 -->
			<div class="current-level-card">
				<div class="level-header">
					<div class="level-icon-large">
						<i class="material-icons">military_tech</i>
					</div>
					<div class="level-info">
						<h2 class="current-level-text">当前等级：Lv{{ userLevel }}</h2>
						<p class="current-xp-text">经验值：{{ userXP }} / {{ nextLevelXP }}</p>
					</div>
				</div>
				<!-- 经验值进度条 -->
				<div class="progress-container">
					<div class="progress-bar">
						<div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
					</div>
					<div class="progress-text">
						<span>还需 {{ remainingXP }} 经验值升级到 Lv{{ nextLevel }}</span>
					</div>
				</div>
			</div>

			<!-- 等级列表 -->
			<div class="levels-section">
				<h3 class="section-title">等级体系</h3>
				<div class="levels-list">
					<div 
						class="level-item" 
						v-for="(level, index) in levels" 
						:key="index"
						:class="{ 'current': level.level === userLevel, 'unlocked': level.level <= userLevel }"
					>
						<div class="level-row">
							<div class="level-badge-item">
								<i class="material-icons">military_tech</i>
								<span class="level-number">Lv{{ level.level }}</span>
							</div>
							<div class="level-discount">
								<i class="material-icons">local_offer</i>
								<span>{{ level.discount }}折</span>
							</div>
						</div>
						<div class="level-xp-range">
							<span>{{ level.minXP }}</span>
							<span class="separator"> - </span>
							<span v-if="level.maxXP === Infinity">∞</span>
							<span v-else>{{ level.maxXP }}</span>
							<span class="xp-unit"> 经验值</span>
						</div>
						<div class="level-loan-limit">
							<i class="material-icons">account_balance_wallet</i>
							<span>贷款额度：¥{{ level.loanLimit }}</span>
						</div>
						<div class="level-progress-mini" v-if="level.level === userLevel">
							<div class="progress-bar-mini">
								<div class="progress-fill-mini" :style="{ width: progressPercentage + '%' }"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 等级权益说明 -->
			<div class="benefits-section">
				<h3 class="section-title">等级权益</h3>
				<div class="benefits-list">
					<div class="benefit-item">
						<i class="material-icons">stars</i>
						<div class="benefit-content">
							<h4>积分奖励</h4>
							<p>每次支付成功可获得积分，1元 = 1积分</p>
						</div>
					</div>
					<div class="benefit-item">
						<i class="material-icons">trending_up</i>
						<div class="benefit-content">
							<h4>经验值累积</h4>
							<p>积分自动转换为经验值，经验值不会因兑换而减少</p>
						</div>
					</div>
					<div class="benefit-item">
						<i class="material-icons">local_offer</i>
						<div class="benefit-content">
							<h4>专属折扣</h4>
							<p>等级越高，享受的折扣越大，最高可享92折优惠</p>
						</div>
					</div>
					<div class="benefit-item">
						<i class="material-icons">card_giftcard</i>
						<div class="benefit-content">
							<h4>积分兑换</h4>
							<p>可使用积分在积分商店兑换各种优惠券和礼品</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部导航 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue'
	import BackButton from '../components/BackButton.vue'
	
	export default {
		name: 'LevelInfo',
		data: function() {
			return {
				userLevel: 1,
				userXP: 0,
				levels: [
					{ level: 1, minXP: 0, maxXP: 500, discount: 99, loanLimit: 500 },
					{ level: 2, minXP: 500, maxXP: 2000, discount: 98, loanLimit: 1000 },
					{ level: 3, minXP: 2000, maxXP: 5000, discount: 96, loanLimit: 2000 },
					{ level: 4, minXP: 5000, maxXP: 20000, discount: 94, loanLimit: 3000 },
					{ level: 5, minXP: 20000, maxXP: Infinity, discount: 92, loanLimit: 5000 }
				]
			}
		},
		computed: {
			currentLevelInfo() {
				return this.levels.find(l => l.level === this.userLevel) || this.levels[0];
			},
			nextLevel() {
				if (this.userLevel >= 5) return 5;
				return this.userLevel + 1;
			},
			currentLevelXP() {
				// 当前等级内的经验值 = 总经验值 - 当前等级的起始经验值
				const currentLevelInfo = this.currentLevelInfo;
				return this.userXP - currentLevelInfo.minXP;
			},
			nextLevelXP() {
				if (this.userLevel >= 5) return '∞';
				const currentLevelInfo = this.currentLevelInfo;
				// 显示当前等级的最大经验值（即升级到下一级的目标）
				return currentLevelInfo.maxXP;
			},
			remainingXP() {
				if (this.userLevel >= 5) return 0;
				const nextLevelInfo = this.levels.find(l => l.level === this.nextLevel);
				if (!nextLevelInfo) return 0;
				
				const targetXP = nextLevelInfo.minXP;
				const remaining = targetXP - this.userXP;
				return remaining > 0 ? remaining : 0;
			},
			progressPercentage() {
				if (this.userLevel >= 5) return 100;
				const currentLevelInfo = this.currentLevelInfo;
				const nextLevelInfo = this.levels.find(l => l.level === this.nextLevel);
				if (!nextLevelInfo) return 0;
				
				const currentXP = this.userXP;
				const levelStartXP = currentLevelInfo.minXP;
				const levelEndXP = nextLevelInfo.minXP;
				const currentLevelXP = currentXP - levelStartXP;
				const totalLevelXP = levelEndXP - levelStartXP;
				
				if (totalLevelXP <= 0) return 100;
				const percentage = (currentLevelXP / totalLevelXP) * 100;
				return Math.min(100, Math.max(0, percentage));
			}
		},
		components: {
			AppFooter,
			BackButton
		},
		created() {
			let user = this.$getSessionStorage('user');
			if (user == null) {
				this.$router.push('/login');
				return;
			}
			this.loadUserInfo();
		},
		methods: {
			loadUserInfo: function() {
				let user = this.$getSessionStorage('user');
				if (!user || !user.userId) {
					return;
				}
				
				this.$axios.post('UserController/user/info', this.$qs.stringify({
					userId: user.userId
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(resp => {
					if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
						const userInfo = resp.data.result || {};
						this.userLevel = userInfo.level || 1;
						this.userXP = userInfo.experiencePoints || 0;
					}
				})
				.catch(err => {
					console.error('加载用户信息失败:', err);
				});
			}
		}
	}
</script>

<style scoped>
	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		padding-bottom: 120px;
	}

	/* 当前等级卡片 */
	.current-level-card {
		background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		padding: 24px;
		margin-bottom: 24px;
		color: white;
	}

	.level-header {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 20px;
	}

	.level-icon-large {
		width: 64px;
		height: 64px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10px);
	}

	.level-icon-large .material-icons {
		font-size: 36px;
		color: white;
	}

	.level-info {
		flex: 1;
	}

	.current-level-text {
		font-size: 24px;
		font-weight: 700;
		margin: 0 0 8px 0;
	}

	.current-xp-text {
		font-size: 16px;
		opacity: 0.9;
		margin: 0;
	}

	/* 进度条容器 */
	.progress-container {
		margin-top: 20px;
	}

	.progress-bar {
		width: 100%;
		height: 12px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 6px;
		overflow: hidden;
		margin-bottom: 8px;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
		border-radius: 6px;
		transition: width 0.5s ease;
		box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
	}

	.progress-text {
		font-size: 14px;
		opacity: 0.9;
		text-align: center;
	}

	/* 等级列表 */
	.levels-section {
		background: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		padding: 20px;
		margin-bottom: 24px;
	}

	.section-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin: 0 0 20px 0;
	}

	.levels-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.level-item {
		padding: 12px 16px;
		border-radius: 10px;
		background: #f9f9f9;
		border: 2px solid transparent;
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.level-item.unlocked {
		background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(66, 165, 245, 0.05) 100%);
	}

	.level-item.current {
		background: linear-gradient(135deg, rgba(25, 118, 210, 0.15) 0%, rgba(66, 165, 245, 0.15) 100%);
		border-color: #1976D2;
		box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
	}

	.level-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
	}

	.level-badge-item {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.level-badge-item .material-icons {
		font-size: 22px;
		color: #1976D2;
	}

	.level-number {
		font-size: 18px;
		font-weight: 700;
		color: #1976D2;
	}

	.level-discount {
		display: flex;
		align-items: center;
		gap: 4px;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		padding: 4px 12px;
		border-radius: 14px;
		color: #644F1B;
		font-weight: 600;
		font-size: 13px;
		flex-shrink: 0;
	}

	.level-xp-range {
		font-size: 13px;
		color: #666;
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.separator {
		margin: 0 2px;
	}

	.xp-unit {
		margin-left: 2px;
		opacity: 0.8;
	}

	.level-loan-limit {
		margin-top: 4px;
		font-size: 13px;
		color: #777;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.level-loan-limit .material-icons {
		font-size: 16px;
		color: #1976D2;
		opacity: 0.85;
	}

	.level-progress-mini {
		margin-top: 8px;
	}

	.progress-bar-mini {
		width: 100%;
		height: 6px;
		background: rgba(25, 118, 210, 0.2);
		border-radius: 3px;
		overflow: hidden;
	}

	.progress-fill-mini {
		height: 100%;
		background: linear-gradient(90deg, #1976D2 0%, #42A5F5 100%);
		border-radius: 3px;
		transition: width 0.5s ease;
	}

	/* 权益说明 */
	.benefits-section {
		background: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		padding: 20px;
	}

	.benefits-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.benefit-item {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		padding: 16px;
		background: #f9f9f9;
		border-radius: 12px;
		transition: all 0.3s ease;
	}

	.benefit-item:hover {
		background: #f0f0f0;
		transform: translateX(4px);
	}

	.benefit-item .material-icons {
		font-size: 32px;
		color: #1976D2;
		flex-shrink: 0;
	}

	.benefit-content {
		flex: 1;
	}

	.benefit-content h4 {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin: 0 0 6px 0;
	}

	.benefit-content p {
		font-size: 14px;
		color: #666;
		margin: 0;
		line-height: 1.5;
	}

	/* 响应式设计 */
	@media (max-width: 480px) {
		.current-level-text {
			font-size: 20px;
		}
		
		.current-xp-text {
			font-size: 14px;
		}
		
		.level-icon-large {
			width: 56px;
			height: 56px;
		}
		
		.level-icon-large .material-icons {
			font-size: 32px;
		}
	}
</style>

